<template>
  <div>
    <div class="noticebox">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多数据了"
          @load="onLoadMore"
        >
          <van-swipe-cell v-for="item in renderData" :key="item.msgNoticeId">
            <div class="outbox">
              <div class="outicon">
                {{ item.readStatus == '1' ? '已读' : '未读' }}
              </div>
              <div class="outdesbox">
                <div class="outname">{{ item.title }}</div>
                <div class="outdes">{{ item.content }}</div>
              </div>
            </div>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
              <van-button
                square
                type="primary"
                text="已读"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { noticeList } from '@/api/outBox';
  import { reactive, ref, onMounted } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useUserStore } from '@/store';
  import { Pagination } from '@/types/global';

  const userStore = useUserStore();
  const userdata = storeToRefs(userStore);
  const studentId = ref(userdata.studentId.value);

  const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
  };

  const pagination = reactive({ ...basePagination });
  const loading = ref(false); // 控制触底加载状态
  const refreshing = ref(false); // 控制下拉刷新状态
  const finished = ref(false); // 标记是否加载完所有数据
  const renderData = ref([]); // 渲染的数据列表

  // 请求数据方法
  const fetchData = async (isRefresh = false) => {
    if (loading.value) return; // 防止重复触发
    loading.value = true;
    try {
      const res = await noticeList({
        current: pagination.current,
        pageSize: pagination.pageSize,
        studentId: studentId.value,
      });
      const newData = res.data.list || [];
      if (isRefresh) {
        renderData.value = newData; // 刷新时替换数据
      } else {
        renderData.value = [...renderData.value, ...newData]; // 加载更多时追加数据
      }
      finished.value = renderData.value.length >= res.data.total; // 检查是否加载完成
    } finally {
      loading.value = false; // 加载完成后关闭
      console.log('加载完成了吗', loading.value);
    }
  };

  // 下拉刷新逻辑
  const onRefresh = async () => {
    refreshing.value = true;
    pagination.current = 1; // 重置页码
    await fetchData(true); // 刷新数据
    refreshing.value = false; // 结束刷新状态
  };

  // 触底加载逻辑
  const onLoadMore = async () => {
    console.log('触底');

    if (finished.value) return;
    pagination.current += 1;
    await fetchData(); // 加载更多数据
  };

  // 初始加载
  onMounted(() => {
    fetchData();
  });
</script>

<style scoped>
  .outbox {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
  }
  .outicon {
    margin-right: 10px;
    color: #999;
  }
  .outdesbox {
    flex: 1;
  }
  .outname {
    font-weight: bold;
    margin-bottom: 5px;
  }
  .outdes {
    color: #666;
  }
  .delete-button {
    width: 70px;
    height: 40px;
  }
</style>

<style scoped>
  .outbox {
    display: flex;
    align-items: center;
    font-size: 26px;
    height: 80px;
  }
  .outdesbox {
    display: flex;
    flex-direction: column;
  }
  .delete-button {
    height: 100%;
  }
  .noticebox {
    height: 400px;
    overflow-y: auto;
  }
</style>
